import { useState } from 'react'
import HeavyComponent from '../components/HeavyComponent'

function Home() {
  const [showHeavy, setShowHeavy] = useState(false)

  return (
    <div className="page">
      <h1>首页</h1>
      <p>欢迎使用Vite进度条插件演示！</p>
      
      <div className="demo-section">
        <h2>功能演示</h2>
        <p>这个演示展示了Vite开发服务器中的进度跟踪功能。</p>
        
        <button 
          onClick={() => setShowHeavy(!showHeavy)}
          className="demo-button"
        >
          {showHeavy ? '隐藏' : '显示'}重型组件
        </button>

        {showHeavy && <HeavyComponent />}
      </div>

      <div className="features">
        <h2>特性</h2>
        <ul>
          <li>实时模块加载进度</li>
          <li>可自定义颜色和高度</li>
          <li>支持状态文本显示</li>
          <li>轻量级实现</li>
        </ul>
      </div>
    </div>
  )
}

export default Home